<script context="module">
	import { browser } from '$app/env';
	import { beforeNavigate } from '$app/navigation';
	import { load_image } from '$lib/utils';

	/** @type {import('@sveltejs/kit').Load} */
	export async function load({ props }) {
		if (browser) {
			await load_image(props.photo.url);
		}
		return { props };
	}
</script>

<script>
	export let photo;

	beforeNavigate(({ from, to, cancel, type }) => {
		if (type === 'unload') {
		}
		if (type === 'initial') {
		}
		cancel();
	});
</script>

<h1>{photo.title}</h1>

<img src={photo.url} alt={photo.title} />

<style>
	img {
		width: 100%;
	}
</style>
